16～69歳の視覚障がい者の 91.7% が
インターネットを利用しています。

視覚障がい者向け
Web アクセシビリティ
入門以前

2017年11月25日
アクセシビリティとは
アクセシビリティとは (accessibility; a11y)

アクセスのしやすさ

  • 表示が速い方がアクセスしやすい
  • レスポンシブ対応すればケータイからアクセスしやすい
  • 多言語対応すれば他言語利用者がアクセスしやすい
  • ServiceWorker を使えばオフラインでもアクセスできる
  • などなど...
アクセシビリティとは

W3C (World Wide Web Consortium) でアクセシビリティ関連の
標準化を行う組織 WAI (Web Accessibility Initiative) では
Web アクセシビリティを障がい者が Web を利用できること
と説明している

Web accessibility means that people with disabilities can use the Web.

この狭義のアクセシビリティには反対意見も（強く）あり、
誰でもどんな環境でもアクセスしやすいという意味で使う人もいる

当発表では「視覚障がい者向けのアクセシビリティ」だけを扱う

視覚障がい者の Web 利用方法
視覚障がい者の Web 利用方法
全盲

主に音声読み上げソフトを利用

ロービジョン（昔は弱視と呼ばれた）

見え方や見えやすい条件に多様な個人差がある
Web 利用方法も様々

  • 音声読み上げソフトを利用
  • 配色・文字サイズ等を変更して利用（カスタム CSS 等）
  • 画面拡大ソフトを利用
  • 画面解像度を調整
  • ディスプレイにレンズをあてて物理的に拡大
音声読み上げソフト
スクリーンリーダー
PC-Talker41,040 円（税込）国内シェア 85.3%
JAWS153,360 円（税込）
NVDA無料オープンソース
ナレーターWindows 標準付属Ctrl + Win + Enter
VoiceOvermacOS, iOS 標準付属
音声ブラウザー
NetReaderⅡ30,240円（税込）要 PC-Talker
IBM Home Page Reader販売終了IE 6 まで
ALTAIRアルティア無料DL リンク切れ...
［デモ］ 音声の読み上げを聴いてみよう
視覚障がい者を意識したマークアップ
視覚障がい者を意識したマークアップ
  • img 要素に alt 属性（代替テキスト）をつける
  • ページの内容がわかるページタイトルをつける
  • 1 つのページにコンテンツを詰め込み過ぎない
  • サイト内検索機能を提供する
  • フォームコントロール要素にラベルを付ける
  • 意味のあるタグを使う（なんでもかんでも div にしない）
  • 意味のあるリンクテキストにする（悪い例: “こちら”）
  • すべての機能をキーボードから利用できるようにする
  • 色を唯一の情報伝達手段にしない
    （例: エラーを赤で表現するだけでなくエラー的文言も出す）
  • 前景と背景の間に十分なコントラストを提供する
  • 勝手に動きだすコンテンツ（例: カルーセル）には
    止める手段を提供する
  • 無限スクロールを使わない
もっとほしいひとへ

WCAG ヘッダーのキャプチャーWeb Content Accessibility Guidelines (WCAG) 2.0 ［日本語訳］

https://waic.jp/docs/WCAG20/Overview.html

Web Content Accessibility Guidelines (WCAG) 2.0

パッと見ハードル高そうな印象を受けるけど文章は割と平易

ガイドライン 1.1 テキストによる代替: すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供すること。
ガイドライン 2.1 キーボード操作可能: すべての機能をキーボードから利用できるようにすること。

目次ぐらい目を通しても損にはならない

音声読み上げソフトを意識したマークアップ
音声読み上げソフトを意識したマークアップ
こんなときどうしよう
  1. アイコンボタンの機能を読み上げてほしい
  2. にぎやかしのためだけの要素を読み飛ばしてほしい
  3. 「タブ」など HTML タグにない意味を要素に与えたい
  1. アイコンボタンの機能を読み上げてほしい
<button class="icon-button" aria-label="お気に入りに追加">
  <i class="mdi mdi-star"></i>
</button>
  1. にぎやかしのためだけの要素を読み上げてほしくない
<p>この要素は読み上げられます</p>
<p aria-hidden="true">この要素は読み上げられません</p>

この要素は読み上げられます

  1. 「タブ」など HTML タグにない意味を要素に与えたい
<div role="tablist" aria-label="Entertainment">
  <button role="tab" aria-selected="true" aria-controls="nils-tab" id="nils">
    Nils Frahm
  </button>
  <button role="tab" aria-selected="false" aria-controls="agnes-tab" id="agnes" tabindex="-1">
    Agnes Obel
  </button>
</div>
<div tabindex="0" role="tabpanel" id="nils-tab" aria-labelledby="nils">
  <p>Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.</p>
</div>
<div tabindex="0" role="tabpanel" id="agnes-tab" aria-labelledby="agnes" hidden="">
  <p>Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.</p>
</div>
  1. 「タブ」など HTML タグにない意味を要素に与えたい

Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.

role 属性や aria-* 属性を規定する W3C 勧告

WAIウェイ-ARIAアリア(Accessible Rich Internet Applications)WAI-ARIA ヘッダーのキャプチャー

https://momdo.github.io/wai-aria-1.1/

WAI-ARIA

要素にロール、ステート、プロパティを
付与するための属性の仕様定義

WAI-ARIA の使用ルールの 1 つは
なるべく WAI-ARIA 属性を使わず
HTML ネイティブの意味を使うこと

（
<div role="progressbar">
より
<progress>
を使うこと）
WAI-ARIA 属性がたくさんあって覚えきれない
WAI-ARIA 属性がたくさんあって覚えきれない
  • WAI-ARIA Authoring Practices に WAI-ARIA 属性の
    使い方と具体例があるのでマネすると話が早い
    （先ほどのタブの例はここから拝借した）

    WAI-ARIA Authoring Practices 1.1

    https://www.w3.org/TR/wai-aria-practices/

  • WAI-ARIA 属性を勝手に付与してくれるような
    コンポーネントライブラリを選べば話が超早い
    jQuery UI、Material UI (React)、Element (Vue.js) など
  • そもそもなるべく使わない方が良いものなので
    必死に覚えなくてもいいと思う
    （HTML 5 のタグと属性を使いこなすのが先決）
視覚障がい者を意識した Web コンテンツ
こんなときどうしよう
  • ボット対策したい
    （利用者がボットではなくヒトであることを確認したい）
ボット対策
CAPTCHA （画像認証）

歪んだ文字画像を表示して文字に起こさせることで
利用者が人間であることを確認するツール

CAPTCHA

画像の代わりに音声を文字に起こす CAPTCHA もある

画像だけの CAPTCHA は視覚障がい者の大敵

ボット対策
No CAPTCHA reCAPTCHA

チェックボックスをクリックするだけで
利用者が人間であることを確認するツール

reCAPTCHA

マウスの動きなどから人間か機械かを判断するらしい
音声 CAPTCHA もオプションとして提供される

アクセシビリティチェックツール
アクセシビリティチェックツール
miChecker （エムアイチェッカー）
JIS X 8341-3:2016 (== WCAG 2.0) に基づく
ウェブアクセシビリティ対応の取組を支援するために
総務省が開発
miChecker やってみた
エムアイチェッカー実行結果画面キャプチャー
miChecker 指摘例
  • 画像にalt属性がありません。代替テキストを設定してください。
  • このHTML文書に空でないtitle要素を提供してください。
  • 文書内で主に利用されている言語をlang属性を用いて明示してください。
  • id 属性の値に重複があります。(fb-root)
  • ページ内リンク "#top-top" は、読み上げ可能なテキストを持たないため、音声アクセスできません
  • "本文へ移動"などのスキップリンクへの到達に83秒もかかります（スキップリンクの挿入位置を見直してください）
  • 同一テキストの繰り返しがあります : "[導入事例]" ＆ "導入事例"
  • フォントサイズは相対的な大きさで指定してください。(FONT-SIZE: 28px)
  • フォーム・コントロールにlabel要素およびtitle属性が関連付けられていません。
miChecker 所感
  • 超手軽
  • 指摘内容的に 1 度は通しておきたい
  • 総務省いい仕事しとる
  • CI 用の CLI あるかな？（未調査）
豆知識で終わらせず実践しましょう
（特に自分）
参考文献

視覚障害者のインターネット利用特性と問題分析：みんなのウェブ

http://barrierfree.nict.go.jp/accessibility/proof/report/blind/index.html

視覚障害者の携帯電話・スマートフォン・タブレット・パソコン利用状況調査2013: 新潟大学学術リポジトリ Nuar

http://dspace.lib.niigata-u.ac.jp/dspace/handle/10191/27807

モバイルアクセシビリティ：WCAG 2.0やその他W3C/WAIのガイドラインのモバイルへの適用 - Qiita

https://qiita.com/magi1125/items/2c2e9d78c6db2724a826

エー イレブン ワイ［WebA11y.jp］

http://weba11y.jp/

盲目のiPhoneユーザーに聞いた、視覚を使わない驚きのスマホ操作術 | スタッフブログ | マイネ王

https://king.mineo.jp/magazines/special/387

このスライド資料は GitHub に置いてあります。

https://luncheon.github.io/2017-11-25-presentation/

※ スマホで見れますが 10MB ほどあるので通信量が気になる方は注意

余談
余談 1 インクルーシブデザインについて

最近『インクルーシブデザイン』という言葉を目にする

『アクセシブル』も『ユニバーサル』も『インクルーシブ』も
「多様な利用者・利用環境への配慮」という文脈を形成する意味で
同じように利用される

が、『インクルーシブデザイン』という言葉を選ぶときは
「障がい者や高齢者を巻き込んで一緒にデザインする」
という意味を込めたり込めなかったりする点に留意が必要

余談 1 インクルーシブデザインについて

インクルーシブデザインの原則
（「Inclusive Design Principles」日本語訳）インクルーシブデザインの原則ページキャプチャー

http://inclusivedesignprinciples.org/ja/

↑ とても読みやすいアクセシビリティガイドラインになっているので
　 一読オススメ

余談 2 視覚障がい者の人数と基準の見直し

日本の視覚障がい者数は約 34 万人
（2015 年末時点の手帳交付者数）

日本の視覚障がい認定基準は米国等と比べると厳しく
米国基準に照らせば約 164 万人になるとの試算も
（2007 年時点／日本眼科医会）

視覚障害がもたらす社会損失額、8.8兆円!!

http://www.gankaikai.or.jp/press/20091115_socialcost.pdf

認定基準の見直しが求められており 2017 年に厚生労働省で
「視覚障害の認定基準に関する検討会」が開催されている

視覚障害の認定基準に関する検討会 ｜厚生労働省

http://www.mhlw.go.jp/stf/shingi/other-syougai.html?tid=404284

余談 3 障害者差別解消法について

2016年4月1日
障害を理由とする差別の解消の推進に関する法律（障害者差別解消法）が施行されました。

概要
  1. 何人も、障害者に対して、障害を理由として、差別することその他の権利利益を侵害する行為をしてはならない。
  2. 社会的障壁の除去は、それを必要としている障害者が現に存し、かつ、その実施に伴う負担が過重でないときは、それを怠ることによつて前項の規定に違反することとならないよう、その実施について必要かつ合理的な配慮がされなければならない。
余談 3 障害者差別解消法について

ちなみにどこかで見たような 5 段階評価表があったりもします

ウェブアクセシビリティ取組確認・評価表のエクセルシート画面キャプチャー
余談 4 「障害」「障碍」「障がい」論争について

戦後一般的だった「障害」「障害者」という表記に対して
「害」という文字の印象が悪いから「障がい」表記にすると
一部の地方公共団体が言い出した（2000年代前半頃～）

余談 4 「障害」「障碍」「障がい」論争について

こういうのはだいたい言い出しっぺが悪い

もともと誰も「障害」という表記に特別な印象を抱てないのに、印象が悪いという主張が現れるとそう見える人が現れる

handicapped は印象が悪いと言って impaired, invalid, disabled, challenged, disability, survivor など新しい言葉を割り当てては混乱と論争を巻き起こすが、
どんなシニフィアン（表現）を選んでもシニフィエ（意味）側が時間とともに偏見を含むようになっていくだけ
（その言葉を差別的な意味で使う人が現れる、あるいは差別的な意味で受け取る人が現れる）

余談 4 「障害」「障碍」「障がい」論争について

内閣府による表記検討結果資料を見ると
歴史的変遷や各派閥の主張がまとまっていておもしろい

ちなみに
当発表では基本的に「障がい」表記とした（引用箇所を除く）
が、深い理由はない（十分な検討ができていない）